<template>
    <div class="net_det_wp">
        <div class="tab_title">
            <span>查看详情</span>
            <i class="iconfonMy icon-guanbi" @click="ipcRenderer.send('close-networkdetail')"></i>
        </div>
        <div class="list_body">
            <div v-for="(item, index) in list" :key="index">
                {{ item }}
            </div>
        </div>
        <div class="btn">
            <span @click="ipcRenderer.send('close-networkdetail')">关闭</span>
        </div>
    </div>
</template>

<script setup>
const { ref } = require('vue');
const { ipcRenderer } = require('electron');
const list = ref([])

ipcRenderer.on('show-networkdetail', () => {
    let networkdetailList = localStorage.getItem('networkdetailList')
    networkdetailList = networkdetailList ? JSON.parse(networkdetailList) : []
    list.value = networkdetailList
})

</script>

<style scoped lang="less">
.net_det_wp {
    background-color: #f0f0f0;
    color: #000;
    height: 295px;
    width: 375px;
    overflow: hidden;

    .tab_title {
        background-color: #ebf6f9;
        color: #000;
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 25px;
        padding-left: 5px;
        -webkit-app-region: drag;

        i {
            -webkit-app-region: no-drag;
            width: 29px;
            height: 25px;
            text-align: center;
        }

        i:hover {
            background-color: #e61123;
            color: #fff;
        }
    }

    .list_body {
        margin: 10px;
        overflow-y: scroll;
        border: 1px solid #fff;
        height: 220px;
        border-bottom: 2px solid #909090;

        span {
            margin-right: 10px;
        }
    }

    .btn {
        text-align: right;
        padding-right: 10px;

        span {
            display: inline-block;
            background-color: #fdfdfd;
            padding: 0 20px;
            border-radius: 3px;
            border: 1px solid #d0d0d0;
            line-height: 18px;
        }
    }
}
</style>
